<template>
	<view style="border-top: 1px solid #e4e4e4">
		<view>
			<view>
				<uv-drop-down ref="dropDown" sign="dropDown_1" text-active-color="#3c9cff"
					:extra-icon="{name:'arrow-down-fill',color:'#666',size:'26rpx'}"
					:extra-active-icon="{name:'arrow-up-fill',color:'#3c9cff',size:'26rpx'}"
					:defaultValue="defaultValue"
					:custom-style="{padding: '0 30rpx', border:'1px' ,background:'#f5f5f5'}" @click="selectMenu">
					<uv-drop-down-item name="ss" type="1" label='综合' :value="dropItem('ss').value">
					</uv-drop-down-item>
					<uv-drop-down-item name="type" type="2" :label="dropItem('type').label"
						:value="dropItem('type').value">
					</uv-drop-down-item>
					<uv-drop-down-item name="xl" type="1" label='销量' :value="dropItem('xl').value">
					</uv-drop-down-item>
					<uv-drop-down-item name="order" type="1" label='筛选' :value="dropItem('order').value">
					</uv-drop-down-item>
				</uv-drop-down>
				<uv-drop-down-popup sign="dropDown_1" :click-overlay-on-close="true" :currentDropItem="currentDropItem"
					@popupChange="change"></uv-drop-down-popup>
			</view>
			<view class="container">
				<view>
					<img :src="imageUrl2" style="margin: 0 32%; width: 240rpx; height: 240rpx;"/>
					<view ><span style="font-size: 28rpx; color: #666666; position: absolute; top: 260rpx;left: 240rpx;">暂无你想要的商品</span></view> 
				</view>
				<view style="margin: 20rpx 0 50rpx 0;"><span style="font-size: 32rpx; font-weight:blod;">相关推荐：</span></view>
				<view
					style=" display: flex; border-radius: 30rpx; height: 280rpx; width: 700rpx; background-color: #ffffff;">
					<view style="padding: 30rpx;">
						<img :src="imageUrl" alt=""
							style="border-radius: 0 0 20rpx 20rpx; width: 220rpx; height: 220rpx;" />
					</view>
					<view style="padding: 30rpx 30rpx 30rpx 0;">
						<view><span style="font-size: 30rpx;">正版动漫周边桌面摆件猫咪手办橘猫手办</span></view>
						<view style="color: red; margin-top: 36rpx;"><span style="font-size: 24rpx;">￥</span><span
								style="font-size: 34rpx;">65</span></view>
						<view style="margin-top: 8rpx;"><span style="font-size: 25rpx;">一家不知名的手办店></span></view>
					</view>
				</view>
				<view
					style="margin-top:25rpx; display: flex; border-radius: 30rpx; height: 280rpx; width: 700rpx; background-color: #ffffff;">
					<view style="padding: 30rpx;">
						<img :src="imageUrl" alt=""
							style="border-radius: 0 0 20rpx 20rpx; width: 220rpx; height: 220rpx;" />
					</view>
					<view style="padding: 30rpx 30rpx 30rpx 0;">
						<view><span style="font-size: 30rpx;">正版动漫周边桌面摆件猫咪手办橘猫手办</span></view>
						<view style="color: red; margin-top: 36rpx;"><span style="font-size: 24rpx;">￥</span><span
								style="font-size: 34rpx;">65</span></view>
						<view style="margin-top: 8rpx;"><span style="font-size: 25rpx;">一家不知名的手办店></span></view>
					</view>
				</view>
				<view
					style="margin-top:25rpx; display: flex; border-radius: 30rpx; height: 280rpx; width: 700rpx; background-color: #ffffff;">
					<view style="padding: 30rpx;">
						<img :src="imageUrl" alt=""
							style="border-radius: 0 0 20rpx 20rpx; width: 220rpx; height: 220rpx;" />
					</view>
					<view style="padding: 30rpx 30rpx 30rpx 0;">
						<view><span style="font-size: 30rpx;">正版动漫周边桌面摆件猫咪手办橘猫手办</span></view>
						<view style="color: red; margin-top: 36rpx;"><span style="font-size: 24rpx;">￥</span><span
								style="font-size: 34rpx;">65</span></view>
						<view style="margin-top: 8rpx;"><span style="font-size: 25rpx;">一家不知名的手办店></span></view>
					</view>
				</view>
				<view
					style="margin-top:25rpx; display: flex; border-radius: 30rpx; height: 280rpx; width: 700rpx; background-color: #ffffff;">
					<view style="padding: 30rpx;">
						<img :src="imageUrl" alt=""
							style="border-radius: 0 0 20rpx 20rpx; width: 220rpx; height: 220rpx;" />
					</view>
					<view style="padding: 30rpx 30rpx 30rpx 0;">
						<view><span style="font-size: 30rpx;">正版动漫周边桌面摆件猫咪手办橘猫手办</span></view>
						<view style="color: red; margin-top: 36rpx;"><span style="font-size: 24rpx;">￥</span><span
								style="font-size: 34rpx;">65</span></view>
						<view style="margin-top: 8rpx;"><span style="font-size: 25rpx;">一家不知名的手办店></span></view>
					</view>
				</view>
				<view
					style="margin-top:25rpx; display: flex; border-radius: 30rpx; height: 280rpx; width: 700rpx; background-color: #ffffff;">
					<view style="padding: 30rpx;">
						<img :src="imageUrl" alt=""
							style="border-radius: 0 0 20rpx 20rpx; width: 220rpx; height: 220rpx;" />
					</view>
					<view style="padding: 30rpx 30rpx 30rpx 0;">
						<view><span style="font-size: 30rpx;">正版动漫周边桌面摆件猫咪手办橘猫手办</span></view>
						<view style="color: red; margin-top: 36rpx;"><span style="font-size: 24rpx;">￥</span><span
								style="font-size: 34rpx;">65</span></view>
						<view style="margin-top: 8rpx;"><span style="font-size: 25rpx;">一家不知名的手办店></span></view>
					</view>
				</view>
				<view
					style="margin-top:25rpx; display: flex; border-radius: 30rpx; height: 280rpx; width: 700rpx; background-color: #ffffff;">
					<view style="padding: 30rpx;">
						<img :src="imageUrl" alt=""
							style="border-radius: 0 0 20rpx 20rpx; width: 220rpx; height: 220rpx;" />
					</view>
					<view style="padding: 30rpx 30rpx 30rpx 0;">
						<view><span style="font-size: 30rpx;">正版动漫周边桌面摆件猫咪手办橘猫手办</span></view>
						<view style="color: red; margin-top: 36rpx;"><span style="font-size: 24rpx;">￥</span><span
								style="font-size: 34rpx;">65</span></view>
						<view style="margin-top: 8rpx;"><span style="font-size: 25rpx;">一家不知名的手办店></span></view>
					</view>
				</view>
				<view class="wrap" style=" padding:40rpx 0 60rpx ; height: 50%;">
					<u-loadmore color="#3366ff" iconColor="#a8d5ff" loadingIcon="semicircle" :status="status"
						:loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		onPageScroll() {
			// 滚动后及时更新位置
			this.$refs.dropDown.init();
		},
		computed: {
			dropItem(name) {
				return (name) => {
					const result = {};
					const find = this.result.find(item => item.name === name);
					if (find) {
						result.label = find.label;
						result.value = find.value;
					} else {
						result.label = this[name].label;
						result.value = this[name].value;
					}
					return result;
				}
			},
			// 获取当前下拉筛选项
			currentDropItem() {
				return this[this.activeName];
			}
		},
		data() {
			return {
				status: 'loading',
				loadingText: '努力中',
				loadmoreText: '轻轻上拉',
				nomoreText: '实在没有了',
				imageUrl: this.$minioServerUrl + '/static/fenxiao/u820.png',
				imageUrl2: this.$minioServerUrl + '/static/fenxiao/u697.png',
				// 表示value等于这些值，就属于默认值
				defaultValue: [0, 'all', '0'],
				// 筛选结果
				result: [{
					name: 'order',
					label: '综合',
					value: 'new'
				}],
				activeName: 'order',
				order: {
					label: '综合',
					value: 'all',
					activeIndex: 0,
					color: '#333',
					activeColor: '#2878ff'
				},
				type: {
					label: '价格',
					value: 'all',
					activeIndex: 0,
					color: '#333',
					activeColor: '#2878ff',
					child: [{
						label: '价格升序',
						value: 'all'
					}, {
						label: '价格降序',
						value: 'pdf'
					}]
				},
				xl: {
					label: '销量',
					value: 0,
					activeIndex: 0
				},
				ss: {
					label: '筛选',
					value: 'all',
					activeIndex: 0,
					color: '#333',
					activeColor: '#2878ff'
				}
			}
		},
		methods: {
			change(e) {
				console.log('弹窗打开状态：', e);
			},
			/**
			 * 点击每个筛选项回调
			 * @param {Object} e { name, active, type } = e
			 */
			selectMenu(e) {
				const {
					name,
					active,
					type
				} = e;
				this.activeName = name;
				// type 等于1 的需要特殊处理：type不等于1可以忽略
				if (type == 1) {
					this.clickItem({
						name: 'vip_type',
						label: 'VIP文档',
						value: e.active ? 1 : 0
					});
				} else {
					const find = this.result.find(item => item.name == this.activeName);
					if (find) {
						const findIndex = this[this.activeName].child.findIndex(item => item.label == find.label && item
							.value == find.value);
						this[this.activeName].activeIndex = findIndex;
					} else {
						this[this.activeName].activeIndex = 0;
					}
				}
			},
			/**
			 * 点击菜单回调处理
			 * @param {Object} item 选中项 { label,value } = e
			 */

		}
	}
</script>

<style lang="scss">
	.container {
		margin:25rpx 25rpx 0;
	}
</style>